<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="https://at.alicdn.com/t/font_1474698_6bc6fpkb0y.css">
    <link rel="stylesheet" href="../../css/common.css">
    <title>商品详情</title>
    <style>
        html,body{
            background-color: #FAFAFA;
        }
        .banner{
            width: 100%;
            height: 6rem;
        }
        .price{
            width: 100%;
            height: auto;
            background-color: #fff;
            padding: 0 .29rem;
        }
        .price .shop-price{
            font-size:.28rem;
            font-family:PingFang SC;
            font-weight:bold;
            color:rgba(26,26,26,1);
            margin-right: .19rem;
        }
        .price .shop-price span{
            font-size:.46rem;
        }
        .price .market-price{
            font-size:.24rem;
            font-family:PingFang SC;
            font-weight:400;
            text-decoration:line-through;
            color:rgba(153,153,153,1);
        }
        .main > .title{
            width: 100%;
            background-color: #fff;
            padding: 0 .29rem;
            font-size:.32rem;
            font-family:PingFang SC;
            font-weight:bold;
            color:rgba(26,26,26,1);
            line-height:.5rem;
        }
        .sales{
            width: 100%;
            height: .91rem;
            background-color: #fff;
            padding: 0 .29rem;
            font-size:.24rem;
            font-family:PingFang SC;
            font-weight:400;
            color:rgba(153,153,153,1);
        }
        .getcount{
            width: 100%;
            height: 1rem;
            padding: 0 .29rem;
            background-color: #fff;
            margin-top: .1rem;
            border-bottom: 1px solid #F5F5F5;
        }
        .getcount .left{
            font-size:.28rem;
            font-family:PingFang SC;
            font-weight:400;
            color:rgba(26,26,26,1);
        }
        .getcount .iconfont{
            color: #999999;
            font-size: .28rem;
        }
        .ensure{
            width: 100%;
            height: 1rem;
            padding: 0 .29rem;
            background-color: #fff;
            border-bottom: 1px solid #F5F5F5;
        }
        .ensure .item{
            margin-right:.4rem;
        }
        .ensure .item img{
            width: .32rem;
            height: .32rem;
        }
        .ensure .item .txt{
            font-size:.24rem;
            font-family:PingFang SC;
            font-weight:400;
            color:rgba(153,153,153,1);
            margin-left:.16rem;
        }
        .ensure .iconfont{
            color: #999999;
            font-size: .28rem;
        }
        .guige{
            width:100%;
            height:auto;
            background-color:#fff;
            margin-top:.2rem;
        }
        .guige .guigui-item{
            width:100%;
            height:auto;
            padding:0 .28rem;
        }
        .guige .guigui-item .title{
            width:100%;
            height:1.06rem;
            font-size:.28rem;
            font-family:PingFang SC;
            font-weight:400;
            color:rgba(26,26,26,1);
        }
        .guige .guigui-item .list{
            width:100%;
            height:auto;
        }
        .guige .guigui-item .list .item{
            width:auto;
            padding:.08rem .2rem;
            border:1px solid #E6E6E6;
            margin-right:.5rem;
            border-radius:.04rem;
            margin-bottom:.2rem;
        }
        .guige .guigui-item .list .item img{
            width:.3rem;
            height:.34rem;
            border-radius:.06rem;
            margin-right:.2rem;
        }
        .guige .guigui-item .list .item span{
            font-size:.28rem;
            font-family:PingFang SC;
            font-weight:400;
            color:rgba(153,153,153,1);
        }
        .guige .guigui-item .list .item.active{
            border:1px solid rgba(26,26,26,1);
        }
        .guige .guigui-item .list .item.active span{
            font-size:.28rem;
            font-family:PingFang SC;
            font-weight:400;
            color:rgba(26,26,26,1);
        }
        /* 评论部分 */
        .comments{
            width: 100%;
            height: auto;
            overflow:hidden;    
            background-color:#fff;
            margin-top:.2rem;
        }
        .comments .title{
            width:100%;
            height:.84rem;
            padding:0 .3rem;
        }
        .comments .title .left .line{
            width:2px;
            height:.3rem;
            background-color:#1A1A1A;
            margin-right:.2rem;
            position:relative;
            top:1px;
        }
        .comments .title .left  span{
            font-size:.28rem;
            font-family:PingFang SC;
            font-weight:400;
            color:rgba(26,26,26,1);
        }
        .comments .title .right  span{
            font-size:.28rem;
            font-family:PingFang SC;
            font-weight:400;
            color:#999999;
        }
        .comments .title .right .iconfont{
            color:#999999;
            font-size:.24rem;
            margin-left:.2rem;
        }
        .comments .list{
            width:100%;
            height:auto;
            padding:0 .3rem;
        }
        .comments .list .item {
            width:100%;

        }
        .comments .list .item .top-user{
            width:100%;
            height:1rem;
           
        }
        .comments .list .item .top-user .left img{
            width:.6rem;
            height:.6rem;
            margin-right:.22rem;
        }
        .comments .list .item .top-user .left span{
            font-size:.28rem;
            font-family:PingFang SC;
            font-weight:400;
            color:rgba(26,26,26,1);
        }
        .comments .list .item .top-user .right .iconfont{
            font-size:.24rem;
            color:#1A1A1A;
            margin-left:.07rem;
        }
        .comments .list .item  .item-ct{
            font-size:.28rem;
            font-family:PingFang SC;
            font-weight:400;
            color:rgba(26,26,26,1);
            line-height:.4rem;
        }
        .comments .list .item  .item-pic{
            width:100%;
            height:auto;
            margin:.4rem 0;
        }
        .comments .list .item .item-pic img{
            width:30%;
            height:auto;
        }
        .goods-detail{
            width:100%;
            height:auto;
            background-color:#fff;
            margin-top:.2rem;
        }
        .goods-detail .title{
            width:100%;
            height:.84rem;
            padding:0 .3rem;
        }
        .goods-detail .title  .line{
            width:2px;
            height:.3rem;
            background-color:#1A1A1A;
            margin-right:.2rem;
        }
        .goods-detail .title  span{
            font-size:.28rem;
            font-family:PingFang SC;
            font-weight:400;
            color:rgba(26,26,26,1);
        }
        .footer .left{
            width:1.5rem;
            height:1rem;
            background:rgba(255,255,255,1);
        }
        .footer .left img{
            width:.38rem;
            height:.38rem;
            background:rgba(153,153,153,1);
            
        }
        .footer .left .txt{
            width:100%;
            height:auto;
            text-align:center;
            font-size:.24rem;
            font-family:PingFang SC;
            font-weight:400;
            color:rgba(153,153,153,1);
            margin-top:.04rem;
        }
        .footer .middle{
            width:3rem;
            height:1rem;
            background:rgba(255,255,255,1);
            box-shadow:-1px 0px 0px 0px rgba(245,245,245,1);
        }
        .footer .right{
            width:3rem;
            height:1rem;
            color:#fff;
        }
    </style>
</head>
<body>
    <div id="root">
        <header class="header flex align-items space-between">
            <div class="back fn-ctr">
                <i class="iconfont iconjiantouzuo"></i>
            </div>
            <div class="middle"></div>
            <div class="right fn-ctr">
                <img src="../../image/collect.png">
            </div>
        </header>
        <div class="main">
            <div class="banner">
                <img src='../../image/detail_banner.png'>
            </div>
            <div class='price flex align-items flex-start'>
                <div class='shop-price'>￥<span>390.0</span></div><div class='market-price'>￥520.0</div>
            </div>
            <div class='title ellipse1'>雅诗兰黛（Estee Lauder）持妆粉底液17号(1W1) 30ml （DW 象牙色适合自然偏白肤色）</div>
            <div class='sales flex align-items flex-start'>月销：1.2万</div>
            <div class='getcount flex align-items space-between'>
                <div class='left'>领取优惠劵</div>
                <i class='iconfont iconarrow-right'></i>
            </div>
            <div class='ensure flex align-items space-between'>
                <div class='left flex align-items flex-start'>
                    <div class='item flex align-items flex-start'>
                        <img src='../../image/dt1.png'>
                        <span class='txt'>正品保证</span>
                    </div>
                    <div class='item flex align-items flex-start'>
                        <img src='../../image/dt2.png'>
                        <span class='txt'>极速发货</span>
                    </div>
                    <div class='item flex align-items flex-start'>
                        <img src='../../image/dt3.png'>
                        <span class='txt'>正品保证</span>
                    </div>
                </div>
                <i class='iconfont iconarrow-right'></i>
            </div>
            <div class='guige'>
                <div class="guigui-item">
                    <div class='title flex align-items flex-start'>颜色</div>
                    <div class="list flex align-items flex-start">
                        <div class="item fn-ctr active">
                            <img src="../../image/goods1.png" alt="">
                            <span>17象牙白</span>
                        </div>
                        <div class="item fn-ctr">
                            <img src="../../image/goods1.png" alt="">
                            <span>62自然偏白</span>
                        </div>
                    </div>
                </div>
                <div class="guigui-item">
                    <div class='title flex align-items flex-start'>颜色</div>
                    <div class="list flex align-items flex-start">
                        <div class="item fn-ctr">
                            <span>30ml</span>
                        </div>
                    </div>
                </div>
            </div>
            <div class="comments">
                <div class="title flex align-items space-between">
                    <div class="left fn-ctr">
                        <div class="line"></div>
                        <span>评论（100）</span>
                    </div>
                    <div class="right fn-ctr">
                        <span>100%好评率</span>
                        <i class="iconfont iconarrow-right"></i>
                    </div>
                </div>
                <div class="list">
                    <div class="item">
                        <div class="top-user flex align-items  space-between">
                            <div class="left flex align-items flex-start">
                                <img src="../../image/heading.png" alt="">
                                <span>王一博</span>
                            </div>
                            <div class="right">
                                <i class="iconfont iconxing"></i><i class="iconfont iconxing"></i><i class="iconfont iconxing"></i>
                            </div>
                        </div>
                        <div class="item-ct">上妆很自然，夏天用很控油，身边朋友几乎都用这个，油皮用DW，干皮用沁水，很自然，持妆时间也比较长，有淡淡的酒精味道，一瓶可以用很久了，相对来说性价比还是很高的，推荐给所有朋友用了，冬天的话可以加一滴保湿精华用，好用!</div>
                        <div class="item-pic flex align-items space-between">
                            <img src="../../image/goods1.png">
                            <img src="../../image/goods1.png">
                            <img src="../../image/goods1.png">
                        </div>
                    </div>
                </div>
            </div>
            <div class="goods-detail">
                <div class="title flex align-items flex-start">
                    <div class="line"></div>
                    <span>商品详情</span>
                </div>
                <div class="dtl-ct">
                   <img src="../../image/detailinfo1.png" alt="">
                   <img src="../../image/detailinfo2.png" alt="">
                </div>
            </div>
        </div>
        <div class="footer flex align-items flex-start">
            <div class="left flex flex-wrap align-content-center">
                <img src="../../image/index_chat.png">
                <div class="txt">客服</div>
            </div>
            <div class="middle fn-ctr">加入购物车</div>
            <div class="right fn-ctr sys-bgcolor">立即购买</div>
        </div>
    </div>
    <script src="../../js/api.js"></script>
    <script src="../../js/vue-components.js"></script>
    <script src="../../js/vue.js"></script>
    <script src="../../js/common.js"></script>
</body>
</html>